<script lang="ts" setup></script>

<template>
  <div class="mb-15">
    <div class="flex flex-col items-center container">
      <h1 class="text-center text-8 font-900 lt-tablet:text-6">
        Welcome to <span class="text-brand-500">G9.Game</span>
      </h1>
      <h2 class="mb-9 max-w-175 text-center text-4 text-sys-text-body font-400 lt-tablet:(text-3.5)">
        G9.Game has over 8 000 games that can be played with 55 different cryptocurrencies. Gaming experience is brightened with generous Bonuses. It’s easy to increase profit by staking BFG tokens
      </h2>
      <div class="mb-15 w-full flex justify-between lt-tablet:(flex-wrap gap-y-6)">
        <div class="statistics-item">
          <span class="statistics-item-count">4</span><span class="statistics-item-desc">Years on the gambling market</span>
        </div><div class="divider" />
        <div class="statistics-item">
          <span class="statistics-item-count">8К+</span><span class="statistics-item-desc">Games on the platform</span>
        </div><div class="divider lt-tablet:hidden" />
        <div class="statistics-item">
          <span class="statistics-item-count">4М</span><span class="statistics-item-desc">Registered users</span>
        </div><div class="divider" />
        <div class="statistics-item">
          <span class="statistics-item-count">24/7</span><span class="statistics-item-desc">Live support</span>
        </div>
      </div>
      <!-- row  -->
      <div class="grid grid-cols-3 gap-x-4 lt-tablet:(grid-cols-1 gap-y-12)">
        <div class="card-1">
          <div class="card-preview">
            <h2>Casino</h2><p>40+ <span>Casino Providers</span></p><p>Live <span>Casino</span></p><p>Original <span>games</span></p>
          </div>
          <p class="card-desc">
            We have exclusive In-house games with top RTP in iGaming - up to 99.28%. Players can choose various Slots, Live, and Table Games from the top providers.
          </p>
        </div>
        <div class="card-2">
          <div class="card-preview">
            <h2>Sport</h2><p>25+ <span>Sports</span></p><p>1 000+ <span>Betting Markets</span></p><p>60 000+ <span>events per Months</span></p>
          </div>
          <p class="card-desc">
            G9.Game’s sportsbook offers the widest range of sports events: Esports crypto betting, boosted odds, Free Bets, Battles, and other great features.
          </p>
        </div>
        <div class="card-3">
          <div class="card-preview">
            <h2>Earn</h2><p>Free-to-Play <span>activities</span></p><p>Staking <span>up to 100% APY</span></p><p>Free <span>and deposit boxes</span></p>
          </div>
          <p class="card-desc">
            G9.Game users earn crypto out of playing: daily payouts for Staking BFG, withdrawing crypto boxes, and winning real Crypto by Free-to-Play games. Everyone finds their way to earn on G9.Game.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.statistics-item {
  --uno: 'flex items-center text-center';
  --uno: 'lt-tablet:gap-1 px-5 w-48% flex-col';
  .statistics-item-count {
    --uno: 'font-700 text-8 text-white text-center';
  }
  .statistics-item-desc {
    --uno: 'text-sys-text-body text-center text-3.5 font-400 lt-tablet:(text-3 text-center)';
  }
}
.divider {
  --uno: 'bg-sys-layer-d w-1px ';
}
.card-preview {
  --uno: 'rounded-4 items-start flex flex-col h-36.5 justify-end mb-6 px-6 py-5 relative text-3.5 font-600 leading-normal';
  &::before {
    --coeff: 1;
    background-size: calc(var(--width) * var(--coeff)) calc(var(--height) * var(--coeff));
    content: '';
    height: calc(var(--height) * var(--coeff));
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: calc(var(--width) * var(--coeff));
    --uno: 'z-0 block absolute right-0 bottom-0';
  }
  h2 {
    --uno: 'text-sys-text-head text-8 font-900 leading-normal h-45px';
  }
  p {
    --uno: ' text-3.5 leading-5 font-600 whitespace-nowrap z-1 ';
  }
}
.card-1 .card-preview {
  background: radial-gradient(114.58% 130.48% at 3.3% 100%, #166534 0%, #22c55e 100%);
  &::before {
    --width: 202px;
    --height: 183px;
    background-image: url(../imgs/about-bg-1.png);
  }
  span {
    --uno: 'text-lime-400';
  }
}
.card-2 .card-preview {
  background: radial-gradient(147.95% 122.26% at 8.3% 89.38%, #4126b3 0%, #9321fd 100%);
  &::before {
    --width: 202px;
    --height: 183px;
    background-image: url(../imgs/about-bg-2.png);
  }
  span {
    --uno: 'text-purple-400';
  }
}
.card-3 .card-preview {
  background: radial-gradient(147.95% 122.26% at 8.3% 89.38%, #002efe 0%, #00abff 100%);
  &::before {
    --width: 202px;
    --height: 183px;
    background-image: url(../imgs/about-bg-3.png);
  }
  span {
    --uno: 'text-sky-400';
  }
}
.card-desc {
  --uno: 'font-500 text-sys-text-body text-3.5 leading-5';
}
.link {
  --uno: 'text-3.5 flex items-center gap-2 text-yellow-500';
}
</style>
